<template>
  <basic-container>

    <template>
      <div class="form-designer">
        <el-container>
          <!--    <el-aside width="20%">
                <el-header style="height:40px;text-align: center;line-height: 40px">工艺</el-header>
                <el-button v-for="process in pfocProcessList" @click="addProcessNode(process.processName,process.id)" style="margin: 5px 5px;min-width:45%" >{{process.processName}}</el-button>
              </el-aside>-->
          <el-main class="demo" style="border: #e0e0e0 solid 1px;">
            <div style="height: auto;border-bottom: 1px solid #e0e0e0;line-height: 50px;padding-left:5px ">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产品类型：
              <el-select
                v-model="productLineType"
                clearable
                disabled
                filterable
                placeholder="请选择产品类型"
                style="width:200px;margin-right: 5px">
                <el-option
                  v-for="item in productLineTypeList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              流程图号：
              <el-input
                v-model="flowChartNo"
                disabled
                placeholder="请输入流程图号"
                style="width:200px;margin-right: 5px"></el-input>
              工艺模板：
              <el-select
                v-model="craftId"
                clearable
                filterable
                placeholder="请选择工艺模板"
                style="width:200px;margin-right: 5px">
                <el-option
                  v-for="item in craftProductList"
                  :key="item.id"
                  :label="item.craftLineName"
                  :value="item.id"
                  @click.native="craftLineChange(item)">
                </el-option>
              </el-select>
              <br />
              产品工艺名称：
              <avue-input
                v-model="productProcessName"
                placeholder="请输入产品工艺名称"
                style="width:200px;margin-right: 5px"></avue-input>
              <!--<avue-input v-model="articleNumber" style="width:140px;margin-right: 5px" placeholder="请输入品号" ></avue-input>-->
              品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
              <avue-select
                v-model="articleNumber"
                :dic="articleNumbeList"
                :props="{label: 'label',value: 'value'}"
                clearable
                dialog-width="100%"
                filterable
                multiple
                placeholder="请选择品号"
                style="width:200px;margin-right: 5px"></avue-select>

              标准工时：
              <avue-input-number
                v-model="standardWorkHours"
                :controls="false"
                :min="0"
                placeholder="请输入标准工时"
                style="width:125px;margin-right: 5px"></avue-input-number>
              分/件

              <el-button
                style="width:80px;height:40px;margin-left: 50px;font-size: 14px"
                type="primary"
                @click="saveLine">保 存
              </el-button>

            </div>

            <avue-flow
              ref="flow"
              v-model="flowForm"
              :height="800"
              :option="option"
              width="100%">
              <template #header="{node}">
                {{ (node || {}).name }}
                <i class="el-icon-delete"
                  style="cursor: pointer;float: right;line-height: 30px;margin-right: 2px"
                  @click="deleteNode(node)">
                </i>
              </template>
              <template slot-scope="{node}">
                <el-collapse
                  :ref="node.id+`Ref`"
                  v-model="formCollapse"
                  :style="{width:'100%',zIndex:zIndexStyle}"
                  @change="collapseChange(node.id)"
                  @mouseover.native="handleMouseEnter(node.id)"
                  @mouseout.native="handleMouseLeave(node.id)">
                  <el-collapse-item :name="node.id" title="工艺属性">
                    <el-descriptions :column="1" border class="margin-top" size="small" title="">

                      <el-descriptions-item v-if="form[node.id+`show`]" label="物料">
                        <!--<avue-select   v-model="form[node.id+`_material`]" filterable clearable  dialogWidth="100%"  multiple placeholder="请选择物料"  :props="{label: 'materialName',value: 'id'}"  :dic="materialDataList" ></avue-select>-->
                        <el-select
                          :ref="node.id+`materialRef`"
                          v-model="form[node.id+`_material`]"
                          :popper-append-to-body="false"
                          clearable
                          dialog-width="100%"
                          filterable
                          multiple
                          placeholder="请选择物料">
                          <el-option
                            v-for="item in materialDataList"
                            style="width: 600px"
                            :label="item.label"
                            :value="item.label"
                            @mouseover.native="handleMouseEnter(node.id)"
                            @mouseout.native="handleMouseLeave(node.id)">
                            <span style="float: right;margin-right:2px;margin-bottom:10px;">
                              <el-input-number
                                v-model="form[node.id+`_material`+item.id+`_ratio`]"
                                :controls="false"
                                placeholder="请输入配比"
                                style="width:120px"
                                @click.native.stop="inputFocus(item, $event)"></el-input-number>
                            </span>
                            <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                              <span style="font-size: 13px;margin-bottom:10px;">{{item.label }}</span>
                            </el-tooltip>
<!--                            <span style="color: #5e80a6; font-size: 13px;margin-bottom:10px;">料号：{{
                                item.materialNo
                              }}</span>
                            <span style="float: right;margin-right:2px;margin-bottom:10px;">{{
                                item.materialName
                              }}</span>-->
                          </el-option>
                        </el-select>
                      </el-descriptions-item>
                      <el-descriptions-item v-if="form[node.id+`show`]" label="辅料">
                        <!-- <avue-select   v-model="form[node.id+`_auxiliaryMaterial`]" filterable clearable  dialogWidth="100%"  multiple placeholder="请选择辅料"  :props="{label: 'materialName',value: 'id'}"  :dic="auxiliaryMaterialList" ></avue-select>-->
                        <el-select
                          :ref="node.id+`auxiliaryMaterialRef`"
                          v-model="form[node.id+`_auxiliaryMaterial`]"
                          :popper-append-to-body="false"
                          clearable
                          dialog-width="100%"
                          filterable
                          multiple
                          placeholder="请选择辅料">
                          <el-option
                            v-for="item in auxiliaryMaterialList"
                            style="width: 600px"
                            :label="item.label"
                            :value="item.label"
                            @mouseover.native="handleMouseEnter(node.id)"
                            @mouseout.native="handleMouseLeave(node.id)">
                            <span style="float: right;margin-right:2px;margin-bottom:10px;">
                              <el-input-number
                                v-model="form[node.id+`_auxiliaryMaterial`+item.id+`_ratio`]"
                                :controls="false"
                                placeholder="请输入配比"
                                style="width:120px"
                                @click.native.stop="inputFocus(item, $event)"></el-input-number>
                            </span>
                            <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                              <span style="font-size: 13px;margin-bottom:10px;">{{item.label }}</span>
                            </el-tooltip>
<!--                            <span style="color: #5e80a6; font-size: 13px;margin-bottom:10px;">料号：{{
                                item.materialNo
                              }}</span>
                            <span style="float: right;margin-right:2px;margin-bottom:10px;">{{
                                item.materialName
                              }}</span>-->
                          </el-option>
                        </el-select>

                      </el-descriptions-item>
                      <!--<el-descriptions-item label="设备分类">
                        <avue-select   v-model="form[node.id+`_deviceClass`]" filterable clearable  dialogWidth="100%"  multiple placeholder="请选择设备分类"  :props="{label: 'label',value: 'value'}"  :dic="deviceClassList" ></avue-select>
                      </el-descriptions-item>
                 -->
                      <el-descriptions-item v-if="form[node.id+`show`]" label="作业指导书">
                        <el-upload
                          :auto-upload="false"
                          :before-remove="(file, file_list)=>{beforeRemove(file, file_list, node.id)}"
                          :file-list="form[node.id+`_workingBookFileList`]"
                          :http-request="(file)=>{uploadFile(file, node.id)}"
                          :limit="2"
                          :on-change="(file, file_list)=>{workingBookChange(file, file_list, node.id)}"
                          :show-file-list="false"
                          accept="application/pdf"
                          action="#"
                          class="avatar-uploader"
                          list-type="text">
                          <el-button plain size="mini" type="primary">选择作业指导书</el-button>
                        </el-upload>
                        <div style="float: left;">
                          <a
                            :href="form[node.id+`_workingBookFileListPDF`]"
                            target="_blank">{{ form[node.id + `_workingBookFileListPDFName`] }}</a><i
                          v-if="form[node.id+`_workingBookFileListPDF`]!='#' "
                          class="el-icon-delete"
                          style="cursor:pointer;margin-left: 2px"
                          @click="deleteWorkingBook(node.id)"></i>
                        </div>
                      </el-descriptions-item>
<!--                      <el-descriptions-item v-if="form[node.id+`show`]" label="自定义属性">
                        <div v-for="item in customList[node.id]" :key="item.id">
                          {{ item.parameterName }}：
                          <el-input v-model="form[node.id+`_`+item.id]" size="mini" style="width: 50px"></el-input>
                          {{ item.unit }}
                          <br />
                        </div>
                      </el-descriptions-item>-->

                    </el-descriptions>
                  </el-collapse-item>
                </el-collapse>
              </template>
            </avue-flow>

          </el-main>
        </el-container>
      </div>
    </template>


    <template>
    </template>
  </basic-container>
</template>

<script>
import { getDeviceClassList } from '@/api/hengdong/pfocinterface' //获取设备相关
import { getPfocProcessList } from '@/api/pfoc/pfocprocess' //获取工艺
import { saveCraftProdictLine } from '@/api/pfoc/craftproductline' //保存提交
import { getCraftProductList } from '@/api/pfoc/craftproduct' //获取工艺模板
import { getItemCodeList } from '@/api/workorder/workordercps' //获取品号集合
// import { getMaterialAccessoryLibraryList } from '@/api/pfoc/materialaccessorylibrary' //获取0:物料;1:辅料;
import {groupItemCodeAndItemSpecification} from "@/api/workorder/workorderbom"; //获取工单物料

export default {
  name: "craft",
  props: {
    productLineTypeList: { //产线类型集合
      type: Array
    }
  },
  data() {
    return {
      formCollapse: [],
      count: 0,
      nodeCount: 0, //节点下标
      form: [], //提交时数据集合
      flowForm: '',
      pfocProcessList: [], //工艺集合
      craftProductList: [], //工艺模板集合
      deviceClassList: [], //设备分类集合
      articleNumber: null, //品号
      craftId: null, //工艺模板ID
      productProcessName: null, //产品工艺名称
      productLineType: null, //产品类型
      flowChartNo: null, //流程图号
      option: {
        name: null,
        nodeList: [], //工艺节点集合
        lineList: []//工艺各节点指向顺序集合
      },
      articleNumbeList: [], //品号集合
      materialDataList: [], //物料集合
      auxiliaryMaterialList: [], //辅料集合
      workList: [], //作业指导书集合
      customList: [], //自定义属性集合
      zIndexStyle: "",
      standardWorkHours: undefined//标准工时
    }
  },
  computed: {
    nodeList() {
      return this.option.nodeList
    }
  },
  watch: {
    formCollapse(newVal, oldVal) {
      const len = newVal.length
      if (len > 3) {
        newVal.length = 3
        //修改提示
        this.$message.warning("一次最多打开三个。")
        return
      }
      oldVal.map(item => {
        this.form[item + 'show'] = false
      })
      newVal.map(item => {
        this.form[item + 'show'] = true
      })
    }
  },
  created() {
    //获取工单物料
    this.getWorkOrderMaterialListData();
    //获取品号集合
    this.getItemCodeListData()
    //获取工艺模板集合
    this.getCraftProductListData()
  },
  mounted() {
    this.nodeCount = this.option.nodeList.length//初始化节点下标
   /* //获取工艺
    this.getPfocProcessListData();
    //获取物料集合
    this.getMaterialDataLists()
    //获取辅料集合
    this.getAuxiliaryMaterialLists()
    //获取设备分类数据
    this.getDeviceClassListData();*/

  },
  methods: {
    inputFocus(e, event) {
      event.stopPropagation()
    },
    //工艺模板选择
    craftLineChange(row) {
      this.formCollapse = [];
      this.$set(this, 'formCollapse', []);//关闭所有折叠面板，防止切换模型照成连线混乱
      this.$nextTick(function (){
        this.$refs.flow.resetPlumb();//清空画布
        for (var i = this.option.nodeList.length - 1; i >= 0; i--) {
          var id = this.option.nodeList[i].id

          for (var n = 0; n < this.auxiliaryMaterialList.length; n++) {
            this.$delete(this.form, id + "_auxiliaryMaterial" + this.auxiliaryMaterialList[n].id + "_ratio") //辅料配比变量删除
          }

          for (var n = 0; n < this.materialDataList.length; n++) {
            this.$delete(this.form, id + "_material" + this.materialDataList[n].id + "_ratio") //物料配比变量删除
          }

          this.$delete(this.form, id + "_material") //物料变量删除
          this.$delete(this.form, id + "_auxiliaryMaterial")//辅料变量删除
          // this.$delete(this.form, id+"_deviceClass");//设备分类变量删除
          this.$delete(this.form, id + "_workingBookFileListPDF")//各工艺作业指导书默认URL
          this.$delete(this.form, id + "_workingBookFileListPDFName")//各工艺作业指导书默认名称
          this.$delete(this.form, id + "_workingBookFileList")//各工艺控制作业指导书列表上传前可以切换文件
          this.$delete(this.workList, id + "work")//同时清空作业指导书上传集合
          //自定义属性变量动态删除
          for (var j = 0; j < this.customList[id].length; j++) {
            this.$delete(this.form, id + "_" + this.customList[id][j].id)
          }
        }
        //获取工艺模板主表数据
        this.craftLineMainData = row//工艺模板主表数据
        //获取工艺模板子表数据
        this.craftId = this.craftLineMainData.id//工艺模板ID
        this.productLineType = this.craftLineMainData.productLineType//产品类型
        this.flowChartNo = this.craftLineMainData.flowChartNo//流程图号
        //设置反显工艺
        this.option.nodeList = JSON.parse(this.craftLineMainData.processNodes)
        //设置反显工艺指向顺序
        this.option.lineList = JSON.parse(this.craftLineMainData.processNodeLine)
        //工艺自定义参数集合
        this.customList = this.craftLineMainData.map
        //初始化节点下标
        var n = this.option.nodeList[this.option.nodeList.length - 1].id
        this.nodeCount = parseInt(n.split("node")[1]) + 1
        //重新初始化flow组件
        this.$refs.flow.init();
        for (var i = this.option.nodeList.length - 1; i >= 0; i--) {
          var id = this.option.nodeList[i].id
          this.$set(this.form, id + "show", false)
          this.$set(this.form, id + "_workingBookFileListPDF", "#")//注册动态节点-各工艺作业指导书默认URL
          this.$set(this.form, id + "_workingBookFileListPDFName", null)//注册动态节点-各工艺作业指导书默认名称
          this.$set(this.form, id + "_workingBookFileList", [])//注册动态节点-各工艺控制作业指导书列表上传前可以切换文件
        }
      })
    },
    /**获取品号*/
    getItemCodeListData() {
      getItemCodeList().then(response => {
        this.articleNumbeList = response.data.data
      })
    },
    /**获取工艺*/
    getPfocProcessListData() {
      getPfocProcessList().then(response => {
        this.pfocProcessList = response.data.data
      })

    },
    /**获取工艺模板集合*/
    getCraftProductListData() {
      getCraftProductList().then(response => {
        this.craftProductList = response.data.data
      })

    },
    /**获取工单物料*/
    getWorkOrderMaterialListData(){
      groupItemCodeAndItemSpecification().then(response => {
        var list = response.data.data;
        list.forEach((item, index) => {
          item.id = index + 1; // 假设ID从1开始
          item.label = "【"+item.itemCode+"】" + "【"+item.itemName+"】" + "【"+item.itemSpecification+"】";
        });
        this.materialDataList=list;//物料集合
        this.auxiliaryMaterialList=list;//辅料集合
      })
    },
    /**获取物料集合*/
    getMaterialDataLists() {
      var data = {
        materialType: "0",
        delFlag: "0"
      }
      getMaterialAccessoryLibraryList(data).then(response => {
        this.materialDataList = response.data.data
      })

    },
    /**获取辅料集合*/
    getAuxiliaryMaterialLists() {
      var data = {
        materialType: "1",
        delFlag: "0"
      }
      getMaterialAccessoryLibraryList(data).then(response => {
        this.auxiliaryMaterialList = response.data.data
      })
    },
    /**获取设备分类数据*/
    getDeviceClassListData() {
      getDeviceClassList().then(response => {
        this.deviceClassList = response.data.data
      })
    },
    /**添加工艺*/
    addProcessNode(name, id,workshopSection) { //工艺名称，工艺ID
      this.$refs.flow.addNode(name, id, this.nodeCount)//添加节点
      this.$set(this.form, "node" + this.nodeCount + "_processName", name)//注册动态节点-当前工艺名称
      this.$set(this.form, "node" + this.nodeCount + "_processId", id)//注册动态节点-当前工艺ID
      this.nodeCount = this.nodeCount + 1//更新节点下标
    },
    /**删除工艺*/
    deleteNode(node) {
      var t = this
      const id = node.id
      this.$confirm("确定要删除节点" + node.name + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: !1
      }).then(function() {
        t.$refs.flow.deleteNode(id)
        t.option.nodeList = t.option.nodeList
        // t.$delete(t.form, id+ "_processName");//删除动态节点-当前工艺名称
        // t.$delete(t.form, id + "_processId");//删除动态节点-当前工艺ID
        t.$delete(t.form, id + "_material") //物料变量删除
        t.$delete(t.form, id + "_auxiliaryMaterial")//辅料变量删除
        // t.$delete(t.form, id+"_deviceClass");
        t.$delete(t.form, id + "_workingBookFileListPDF")//注册动态节点-各工艺作业指导书默认URL
        t.$delete(t.form, id + "_workingBookFileListPDFName")//注册动态节点-各工艺作业指导书默认名称
        t.$delete(t.form, id + "_workingBookFileList")//注册动态节点-各工艺控制作业指导书列表上传前可以切换文件
        t.$delete(this.workList, id + "work")//同时清空作业指导书上传集合
        //自定义属性变量动态删除
        for (var j = 0; j < t.customList[id].length; j++) {
          t.$delete(t.form, id + "_" + t.customList[id][j].id)
        }
      }).catch(function() {
      })
    },
    /**保存工艺产线*/
    saveLine() {
      if (this.validatenull(this.productProcessName)) {
        this.$message.warning("产品工艺名称不能为空。")
        return
      }
      if (this.validatenull(this.articleNumber)) {
        this.$message.warning("品号不能为空。")
        return
      }
      if (this.validatenull(this.craftId)) {
        this.$message.warning("工艺模板不能为空。")
        return
      }
      if (this.validatenull(this.option.nodeList)) {
        this.$message.warning("请选择工艺创建工艺产线。")
        return
      }
      if (this.validatenull(this.standardWorkHours)) {
        this.$message.warning("请输入工艺标准工时。")
        return
      }
      //组装需要提交的数据-工艺主表数据组装
      var params = {}//主表参数集合
      params.productProcessName = this.productProcessName//产品工艺名称
      params.articleNumber = this.articleNumber.toString()//品号
      params.craftId = this.craftId//工艺模板ID
      params.productLineType = this.productLineType//产品类型名称
      params.flowChartNo = this.flowChartNo//流程图号
      params.processNodes = JSON.stringify(this.option.nodeList)//工艺节点集合（其中mark字段为工艺ID）
      params.processNodeLine = JSON.stringify(this.option.lineList)//工艺各节点指向顺序集合
      params.standardWorkHours = this.standardWorkHours//标准工时

      //组装需要提交的数据-工艺子表数据组装
      var objArr = []
      //作业指导书上传集合
      var fileList = []
      //作业指导书上传时对应文件名以及工艺
      var orderString = ""
      //循环工艺节点集合
      for (var i = 0; i < this.option.nodeList.length; i++) {
        var obj = new Object()//创建对象
        obj['auxiliaryMaterialRatio'] ="";
        var auxiliaryMaterial =this.form[this.option.nodeList[i].id + '_auxiliaryMaterial'];
        if(!this.validatenull(auxiliaryMaterial)) {
          for(var m=0;m< auxiliaryMaterial.length;m++){
            //获取子的下标item.label
            var index = this.auxiliaryMaterialList.findIndex(item => item.label === auxiliaryMaterial[m]);
            //比例
            var ratio = this.form[this.option.nodeList[i].id + '_auxiliaryMaterial'+(index+1)+"_ratio" ]
            if(this.validatenull(ratio)){
              obj['auxiliaryMaterialRatio'] =  obj['auxiliaryMaterialRatio'] + undefined+",";
            }else{
              obj['auxiliaryMaterialRatio'] =  obj['auxiliaryMaterialRatio'] + ratio+",";
            }
          }
          obj['auxiliaryMaterialRatio'] = obj['auxiliaryMaterialRatio'].slice(0, -1);
          obj['auxiliaryMaterial'] = auxiliaryMaterial.join('#@');
        }else{
          obj['auxiliaryMaterial'] = null;
        }
        obj['materialRatio'] ="";
        var material = this.form[this.option.nodeList[i].id + '_material'];
        if(!this.validatenull(material)) {
          for(var m=0;m< material.length;m++){
            //获取子的下标
            var index = this.materialDataList.findIndex(item => item.label === material[m]);
            //比例
            var ratio = this.form[this.option.nodeList[i].id + '_material'+(index+1)+"_ratio"]
            if(this.validatenull(ratio)){
              obj['materialRatio'] =  obj['materialRatio'] + undefined+",";
            }else{
              obj['materialRatio'] =  obj['materialRatio'] + ratio+",";
            }
          }
          obj['materialRatio'] = obj['materialRatio'].slice(0, -1);
          obj['material'] = material.join('#@');
        }else{
          obj['material'] = null;
        }

        // if(!this.validatenull(this.form[this.option.nodeList[i].id + '_deviceClass'])) {
        //     obj['deviceClass'] = this.form[this.option.nodeList[i].id + '_deviceClass'].toString();
        // }else{
        //     obj['deviceClass'] = null;
        // }
        obj['processId'] = this.option.nodeList[i].mark//取出工艺ID加入对象
        obj['nodeId'] = this.option.nodeList[i].id
        //将作业指导书放入数组
        if (!this.validatenull(this.workList[this.option.nodeList[i].id + "work"])) {
          fileList.push(this.workList[this.option.nodeList[i].id + "work"].raw)
          orderString = orderString + this.option.nodeList[i].id + "-" + this.workList[this.option.nodeList[i].id + "work"].raw.name + ";"
        }
        var customArr = []
        //自定义属性
        for (var j = 0; j < this.customList[this.option.nodeList[i].id].length; j++) {
          var customObj = new Object()//创建自定义属性对象
          customObj.model = this.option.nodeList[i].id + "_" + this.customList[this.option.nodeList[i].id][j].id
          customObj.key = this.customList[this.option.nodeList[i].id][j].parameterName
          customObj.unit = this.customList[this.option.nodeList[i].id][j].unit
          if (!this.validatenull(this.form[customObj.model])) {
            customObj.value = this.form[customObj.model]
          } else {
            customObj.value = null
          }
          customArr[j] = customObj
        }
        obj['customAttribute'] = JSON.stringify(customArr)
        //最后加入提交数据数组
        objArr.push(obj)
      }
      var fileData = new FormData()
      if (fileList.length > 0) {
        for (var i = 0; i < fileList.length; i++) {
          fileData.append("files", fileList[i])// 文件对象
        }
      } else {
        fileData.append("files", null)// 文件对象
      }
      /*                for (const [key, value] of fileData) {
                      }*/
      const detailsJson = JSON.stringify(objArr) //对象数组转换为JSON
      const detailsBob = new Blob([detailsJson], { //对象数组转换为Blob
        type: 'application/json'
      })
      const objJson = JSON.stringify(params)
      const objBob = new Blob([objJson], { //对象转换为Blob
        type: 'application/json'
      })
      fileData.append("craftProductLines", objBob)
      fileData.append("craftProductLineDetailsLists", detailsBob)
      fileData.append("orderString", orderString)
      //提交
      saveCraftProdictLine(fileData).then(response => {
        if (response.data.data.length > 0) {
          this.$message.warning(
            {
              message: "保存成功，其中品号：" + response.data.data + "等与当前工艺模版对应关系已存在，已忽略重复添加",
              duration: 5000 // 设置时长为5秒
            })
        } else {
          this.$message.success("保存成功。")
        }
        this.$emit('closeAddCraft')//关闭新增页面
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleClick(node) {
      this.$message.success(JSON.stringify(node))
    },
    handleNext() {
      this.count++
      if (this.count >= this.nodeList.length) {
        this.count = 0
      }
      this.flowForm = this.nodeList[this.count].id
    },
    viewShunxu() {
      this.$message.success(JSON.stringify(this.option.lineList))
      /*this.$message.success(JSON.stringify(this.option.nodeList))*/
    },

    //作业指导书上传文件选择
    workingBookChange(file, fileList, nodeId) {
      var isType = null
      isType = file.name.substring(file.name.lastIndexOf('.'))
      this.form[nodeId + "_workingBookFileList"] = fileList.slice(-1)
      if (isType === '.pdf') {
        file.url = URL.createObjectURL(file.raw)//创建上传文件URL
        this.form[nodeId + "_workingBookFileListPDF"] = file.url
        this.form[nodeId + "_workingBookFileListPDFName"] = file.name
        //将需要上传的作业指导书存入集合
        file.raw.node = nodeId//设置作业指导书所属工艺顺序方便上传后保存对应工艺
        this.workList[nodeId + "work"] = file
      }
      isType = file.raw.type === 'application/pdf'
      if (!isType) {
        this.$notify.warning({
          title: '警告',
          message: '请上传格式为application/pdf格式的作业指导书文件。'
        })
      }

 /*     const isLt = file.size / 1024 / 1024 < 10
      if (!isLt) {
        this.$notify.warning({
          title: '警告',
          message: '上传作业指导书文件大小不能超过 10MB!'
        })
      }*/
      return isType; //&& isLt
    },
    //作业指导书文件删除
    deleteWorkingBook(nodeId) {
      this.form[nodeId + "_workingBookFileListPDF"] = "#"//各工艺作业指导书默认URL
      this.form[nodeId + "_workingBookFileListPDFName"] = null//各工艺作业指导书默认名称
      this.form[nodeId + "_workingBookFileList"] = []//各工艺控制作业指导书列表上传前可以切换文件
      this.$delete(this.workList, nodeId + "work")//同时清空作业指导书上传集合
    },
    //鼠标移到置顶
    handleMouseEnter(nodeId) {
      //属性鼠标移到展开
      // this.$set(this.showActive, nodeId, ['1']);
      const ref = nodeId + "Ref"//获取到当前的ref
      this.$refs[ref].$parent.$refs.node.style.zIndex = "999999"
      this.zIndexStyle = "1"

    },
    //鼠标移开取消置顶
    handleMouseLeave(nodeId) {
      //属性鼠标移开关闭
      // this.$set(this.showActive, nodeId, []);
      const ref = nodeId + "Ref"//获取到当前的ref
      this.$refs[ref].$parent.$refs.node.style.zIndex = "2"
      this.zIndexStyle = ""

    },
    //伸缩面板切换
    collapseChange(nodeId) {
      const material = nodeId + "materialRef"
      const auxiliaryMaterial = nodeId + "auxiliaryMaterialRef"
      if (this.$refs[material] === document.activeElement){ //判断是否有焦点
        this.$refs[material].blur();
      }
      if ( this.$refs[auxiliaryMaterial]===document.activeElement) {//判断是否有焦点
        this.$refs[auxiliaryMaterial].blur();
      }
    }
  }
}
</script>

<style scoped>
/deep/ .avue-flow__node {
  height: auto !important;
}

/deep/ .avue-flow__node-header {
  line-height: 30px;
}

/deep/ .el-descriptions__title {
  font-size: 14px;
  font-weight: 400;
  margin-top: 5px;
}

/deep/ .el-select-dropdown.is-multiple .el-select-dropdown__item {
  padding-right: 10px !important;
}

/*以下样式是打印的时候avue表格错乱修正方式（主要是序号列和操作列固定影响的）*/
/deep/ .el-table__fixed {
  display: none !important;
}

/deep/ .el-table__fixed-right {
  display: none !important;
}

/deep/ .el-table__cell.is-hidden > * {
  visibility: visible !important;
}

/deep/ .avue-grid {
  display: none !important;
}

/deep/ .el-main {
  background: #fff !important;
}

/deep/ .el-card__body {
  padding: 0px !important;
}

/*去掉滚动条样式*/
.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
